<template>
	<view class="imgList">
		<page-head :transparent='false' class="yk">
			<slot slot="title">{{ title.length > 10 ? title.substr(0, 10) + '...' : title }}</slot>
			<slot slot="right">{{ '' }}</slot>
		</page-head>
		<view class="imgbox" v-for="(item, i) in imgList" :key="i">
			<image :src="item.img" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import syzn1 from '../../static/img/guidance/syzn1.png'
	import syzn2 from '../../static/img/guidance/syzn2.png'
	import syzn3 from '../../static/img/guidance/syzn3.png'
	import syzn4 from '../../static/img/guidance/syzn4.png'
	import syzn5 from '../../static/img/guidance/syzn5.png'
	import syzn6 from '../../static/img/guidance/syzn6.png'
	import syzn7 from '../../static/img/guidance/syzn7.png'
	import syzn8 from '../../static/img/guidance/syzn8.png'
	import syzn9 from '../../static/img/guidance/syzn9.png'
	import syzn10 from '../../static/img/guidance/syzn10.png'
	
	export default {
		data() {
			return {
				title: 'APP使用指南',
				imgList: [
					{img: syzn1},
					{img: syzn2},
					{img: syzn3},
					{img: syzn4},
					{img: syzn5},
					{img: syzn6},
					{img: syzn7},
					{img: syzn8},
					{img: syzn9},
					{img: syzn10}
				]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.imgList{
		width: 100%;
		
		.imgbox{
			width: 100%;
			overflow-y: auto;
			overflow: hidden;
			
			image{
				width: 100%;
				display: block;
			}
		}
	}
</style>
